<template>
	<div class="icons">
		<swiper ref="mySwiper" :options="swiperOptions">
			<swiper-slide v-for="(page,index) in pages" :key="index">
				<a class="icon-box" href="#" v-for="item in page" :key="item.id">
					<img  class="img-icon" :src="item.imgUrl" alt="">
					<span class="span-icon">{{item.desc}}</span>
				</a>
			</swiper-slide>	
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default{
		data(){
			return{
				swiperOptions:{
					//增加小原点
					pagination: '.swiper-pagination',
				}
			}
		},
		computed:{
			...mapGetters(['pages'])
		}
	}
</script>

<style lang="stylus" scoped>
	@import '../../assets/styles/varibles.styl'
	@import '../../assets/styles/mixins.styl'
	//穿透，让这个类下的组件的swiper的高度改变
	.icons >>>.swiper-container
		height :0
		padding-bottom :52%  
		// background-color :blue
	.icon-box
		float :left
		overflow :hidden
		width :25%
		height :0
		margin-top 0.05rem
		padding-bottom :25%
		// background-color :red
		text-align :center
		.img-icon
			width :60%
			margin-top: .1rem;
		.span-icon
			display: block;
			margin-top: .2rem;
			font-size: .3rem;
			color:#333
			ellipsis()
</style>
